
<div class="m1 modal-content ">
<div class="modal-header">
  <h3>设置投放平台</h3>

</div>
<div class="modal-body">
    <div class="panel panel-default">
        <div class="panel-heading">
            <ul>
                <li>您可通过点击
                    <input type="checkbox" id="switch" checked="" >
                    <script>$("#switch").bootstrapSwitch({
                        onColor:"success",
                        offColor:"info",
                        size:"mini"
                    });
                    </script> 来设置是否投放，"<span class="glyphicon glyphicon-warning-sign" aria-hidden="true"></span>"表示暂不可投放</li>
                <li>您只有投放淘宝站内的定向推广后，才能选择投放淘宝站外的定向推广，<a href=" #">了解详情>></a></li>
            </ul>
        </div>
    </div>
    <div class="platform1" ng-init="mode='yes'">
        <span class="glyphicon glyphicon-tower" aria-hidden="true"></span>
        <h4>计算机设备：</h4>
        <div class="btn-group btn-group-sm" role="group">
            <button type="button" class="btn" ng-class="{'btn-primary':(mode=='yes'), 'btn-default':(mode!='yes')}" ng-click="mode='yes';">自动优化</button>
            <button type="button" class="btn" ng-class="{'btn-primary':(mode=='no'), 'btn-default':(mode!='no')}" ng-click="mode='no';" >不自动优化</button>
        </div>
    </div>
    <div class="platform2" ng-init="mode1='on'">
        <span class="glyphicon glyphicon-phone" aria-hidden="true"></span>
        <h4>移动设备：</h4>
        <div class="btn-group btn-group-sm" role="group">
            <button type="button" class="btn" ng-class="{'btn-primary':(mode1=='on'), 'btn-default':(mode1!='on')}" ng-click="mode1='on';">自动优化</button>
            <button type="button" class="btn" ng-class="{'btn-primary':(mode1=='off'), 'btn-default':(mode1!='off')}" ng-click="mode1='off';" >不自动优化</button>
        </div>
    </div>
    <div class="panel panel-default">
        <div class="panel-heading">
           <p>淘宝站内</p>
        </div>
    </div>
    <dl>
        <dd>搜索推广：<span class="glyphicon glyphicon-question-sign" aria-hidden="true"></span>投放</dd>
        <dd>定向推广：<span class="glyphicon glyphicon-question-sign" aria-hidden="true"></span>不投放 <img src="Img\home\u244.png"> 投放</dd>
    </dl>
    <br>
    <div class="panel panel-default">
        <div class="panel-heading">
            <p>淘宝站外<span class="glyphicon glyphicon-question-sign" aria-hidden="true"></span></p>
        </div>
    </div>
    <dl>
        <dd>搜索推广：不投放 <img src="Img\home\u244.png"> 投放</dd>
        <dd>定向推广：不投放 <img src="Img\home\u244.png"> 投放</dd>
        <dd>投放价格：淘宝站外投放价格 = 淘宝站内投放价格 * 折扣</dd>
        <dd>折扣：<span id="title">0</span>
            <ul class="lanren">
                <li>
                    <div class="scale_panel">
                        <div class="scale" id="bar">
                            <div></div>
                            <span id="btn"></span>
                        </div>
                        <span class="r">100</span>0
                    </div>
                </li>
            </ul>
        </dd>
    </dl>


    <script>
        var scale = function (btn,bar,title){
            this.btn=document.getElementById(btn);
            this.bar=document.getElementById(bar);
            this.title=document.getElementById(title);
            this.step=this.bar.getElementsByTagName("div")[0];
            this.init();
        };
        scale.prototype={
            init:function (){
                var f=this,g=document,b=window,m=Math;
                f.btn.onmousedown=function (e){
                    var x=(e||b.event).clientX;
                    var l=this.offsetLeft;
                    var max=f.bar.offsetWidth-this.offsetWidth;
                    g.onmousemove=function (e){
                        var thisX=(e||b.event).clientX;
                        var to=m.min(max,m.max(-2,l+(thisX-x)));
                        f.btn.style.left=to+'px';
                        f.ondrag(m.round(m.max(0,to/max)*100),to);
                        b.getSelection ? b.getSelection().removeAllRanges() : g.selection.empty();
                    };
                    g.onmouseup=new Function('this.onmousemove=null');
                };
            },
            ondrag:function (pos,x){
                this.step.style.width=Math.max(0,x)+'px';
                this.title.innerHTML=pos+'%';
            }
        };
        new scale('btn','bar','title');
    </script>

</div>
<div class="modal-footer ">
    <button class="btn btn-primary" type="button" ng-click="ok()">保存</button>
    <button class="btn btn-warning" type="button" ng-click="cancel()">取消</button>
</div>
</div>
